<template>
  <aside class="aside animate__animated animate__fast animate__fadeInLeft">
    <img src="@/assets/imgs/logo.png" alt="logo" class="logo" />
    <nav>
      <span class="line" ref="lineRef"></span>
      <div class="item" v-for="item in navArr" ref="navItem" :key="item.id"
        :class="[{ 'active': currentRoute == item.routerName }]" @click="sendRouter(item)">
        <span class="iconfont" :class="item.iconName"></span>
        <span>{{ item.navName }}</span>
      </div>

    </nav>
    <div class="aside__support">
      <img src="@/assets/imgs/support.png" alt="logo">
      <el-button type="primary" @click="emits('support')">
        <span class="iconfont icon-zaixianzhichi"></span>
        <span>在线支持</span>
      </el-button>
    </div>
    <el-button text bg link class="exit" @click="exitLogin">
      <span class="iconfont icon-tuichu"></span>
      <span>退出登录</span>
    </el-button>
  </aside>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { IHomeNav } from '@/types/home';

const { currentRoute, navArr } = defineProps<{ currentRoute: string, navArr: IHomeNav[] }>()
const emits = defineEmits(["update:currentRoute", "support"])
const router = useRouter()
const route = useRoute()
const lineRef = ref<HTMLSpanElement>()
const navItem = ref<HTMLDivElement[]>()

onMounted(() => {
  emits("update:currentRoute", route.fullPath)
  setLine(navArr.findIndex(item1 => item1.routerName == route.fullPath))
})
// 切换路由
function sendRouter(item: IHomeNav) {
  emits("update:currentRoute", item.routerName)
  setLine(navArr.findIndex(item1 => item1.id == item.id))
  router.push(item.routerName)
}
// 切换时滑动
function setLine(index: number) {
  if (index > navItem.value!.length) return;
  const item = navItem.value![index].getBoundingClientRect()
  lineRef.value!.style.cssText = `height:${item.height}px;top:${item.top - 10}px;`
}



// 退出登录
function exitLogin() {
  console.log("未开发完成");

}

</script>

<style lang="scss" scoped>
.aside {
  position: relative;
  background-color: white;
  border-radius: 10px;
  width: 200px;
  height: 98vh;
  margin: 10px 0;

  >.logo {
    position: absolute;
    left: 20px;
    top: 40px;
  }

  >nav {
    // background-color: red;
    margin-top: 120px;
    padding: 10px 20px;

    >.item {
      width: 100%;
      user-select: none;
      padding: 6px 10px;
      border-radius: 3px;
      margin: 10px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;

      &:hover,
      &.active {
        background-color: rgba($color: #3F8CFF, $alpha: .1);
        color: #3F8CFF;
      }

      .iconfont {
        font-size: 20px;
      }


    }

    >.line {
      position: absolute;
      right: 12px;
      top: 130px;
      // height: 15px;
      width: 3px;
      border-radius: 3px;
      background-color: #3F8CFF;
      transition: .5s linear;
    }
  }

  &__support {
    width: 84%;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba($color: #3F8CFF, $alpha: .1);
    border-radius: 20px;
    margin: 50px auto 0;

    >img {
      margin-top: -53px;
      width: 82%;
    }

    :deep(.el-button) {
      width: 70%;
      margin: 20px 0;

      .iconfont {
        margin-right: 13px;
        font-size: 20px;
      }
    }
  }

  .exit {
    margin: 20px 0;
    position: absolute;
    bottom: 0px;
    left: 25%;
    font-size: 16px;

    &.el-button.is-text:not(.is-disabled).is-has-bg {
      background-color: transparent;
    }

    &.el-button.is-link:focus,
    .el-button.is-link:hover {
      background-color: transparent;

    }

    .iconfont {
      margin-right: 13px;
      font-size: 20px;
    }
  }

}
</style>